<template>
	<view class="pageBg">
		<view class="user-layout ">
			<view :style="{height:getNavBarHeight()+'px'}">

			</view>
			<view class="userinfo">
				<view class="avatar">
					<image src="../../static/image/avatar/OIP-C.jpg" mode="aspectFill"></image>
				</view>
				<view class="ip">{{userInfo.IP}}</view>
				<view class="address">来自：
					{{ userInfo.address.city || userInfo.address.province || userInfo.address.country}}
				</view>
			</view>

			<view class="section">
				<navigator url="/pages/classList/classList?name=我的下载&type=download">
					<view class="row">
						<view class="left">
							<uni-icons type="download-filled" color="#24b48e" size="35rpx"></uni-icons>
							<view class="text">我的下载</view>
						</view>
						<view class="right">
							<view class="number">{{userInfo.downloadSize}}</view>
							<uni-icons type="right" color="gray" size="30rpx"></uni-icons>
						</view>
					</view>
				</navigator>
				<navigator url="/pages/classList/classList?name=我的评分&type=score">
					<view class="row">
						<view class="left">
							<uni-icons type="star-filled" color="#24b48e" size="35rpx"></uni-icons>
							<view class="text">我的评分</view>
						</view>
						<view class="right">
							<view class="number">{{userInfo.scoreSize}}</view>
							<uni-icons type="right" color="gray" size="30rpx"></uni-icons>
						</view>
					</view>
				</navigator>

				<view class="row">
					<view class="left">
						<uni-icons type="chatboxes-filled" color="#24b48e" size="35rpx"></uni-icons>
						<view class="text">联系客服</view>
						<!-- #ifdef MP -->
						<button open-type="contact" class="contact">联系客服</button><strong></strong>
						<!-- #endif -->

						<!-- #ifndef H5 -->
						<button @click="MakeCall" class="makecall">拨打电话</button>
						<!-- #endif -->

					</view>
				</view>


			</view>
			<view class="section">

				<view class="row" @click="toSubscribe">
					<view class="left">
						<uni-icons type="notification-filled" color="#24b48e" size="35rpx"></uni-icons>
						<view class="text">订阅更新</view>
					</view>
					<view class="right">
						<view class="number">3</view>
						<uni-icons type="right" color="gray" size="30rpx"></uni-icons>
					</view>
				</view>


				<view class="row" @click="toCommonProblem">
					<view class="left">
						<uni-icons type="flag-filled" color="#24b48e" size="35rpx"></uni-icons>
						<view class="text">常见问题</view>
					</view>
					<view class="right">
						<view class="number">3</view>
						<uni-icons type="right" color="gray" size="30rpx"></uni-icons>
					</view>
				</view>

			</view>

		</view>
	</view>


</template>

<script setup>
	import {
		reactive
	} from "vue";
	import {
		getNavBarHeight
	} from "@/utils/system.js"
	import {
		apiUserInfo
	} from "@/api/apis.js"
	const userInfo = reactive({
		IP: "110.110.110.110",
		address: {
			city: "阎王府",
			province: "M78省份",
			country: "龙国"
		},
		downloadSize: "",
		scoreSize: ""
	})


	const MakeCall = () => {
		uni.makePhoneCall({
			phoneNumber: "18810179282"
		})
	}
	const getUserInfo = () => {
		apiUserInfo().then(res => {
			const userData = res.data
			userInfo.IP = userData.IP
			userInfo.address = userData.address
			userInfo.downloadSize = userData.downloadSize
			userInfo.scoreSize = userData.scoreSize
		})
	}
const toCommonProblem = ()=>{
	uni.navigateTo({
		url:"/pages/notice/detail?id=6536358ce0ec19c8d67fbe82"
	})
}
const toSubscribe = ()=>{
	console.log("toSubscribe。。。");
	uni.navigateTo({
		url:"/pages/notice/detail?id=653507c6466d417a3718e94b"
	})
}

	getUserInfo();
</script>

<style lang="scss" scoped>
	.pageBg {
		background:
			linear-gradient(to bottom, transparent, #fff 400rpx),
			linear-gradient(to right, #beecd8 20%, #F4E2D8);
		min-height: 80vh;
	}

	.user-layout {
		width: 690rpx;
		margin: 0 auto;

		.userinfo {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.avatar {
				padding: 30rpx 0;
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}

			}

			.ip {
				font-size: 47rpx;
				padding: 0 0 20rpx 0;

			}

			.address {
				font-size: 30rpx;
				color: darkgray;
			}

		}


		.section {
			width: 100%;
			// height: 199rpx;
			border: 1rpx #eee solid;
			border-radius: 10rpx;
			background-color: white;
			margin: 55rpx 0;
			box-shadow: 0 0 5rpx #eee;

			.row {
				width: 100%;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx #eee solid;
				position: relative;

				.contact,
				.makecall {
					position: absolute;
					top: 0;
					left: 0;
					width: 690rpx;
					height: 100rpx;
					opacity: 0;

				}

				&:last-child {
					border-bottom: none;
				}

				.left {
					// position: absolute;
					padding: 0 10rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.text {
						padding: 0 10rpx;
						color: dimgray;
					}
				}

				.right {
					padding: 0 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: gray;

					.number {
						padding: 0 2rpx;
					}
				}
			}
		}

	}
</style>